import React from 'react'
import { connect } from 'react-redux'
import { projectLabelView as projectDuck } from 'ducks'

class ImageListButton extends React.Component {
  state = { hover: false }

  handleMouseInter = () => this.setState({ hover: true })

  handleMouseLeave = () => this.setState({ hover: false })

  render() {
    const { hover } = this.state
    const { children, img, action } = this.props
    const classString = hover === false ? '' : 'label-glrBtnHover'
    return (
      <div
        className={classString}
        onMouseEnter={() => this.handleMouseInter()}
        onMouseLeave={() => this.handleMouseLeave()}
        onClick={action}
      >
        <img src={img} />
      </div>
    )
  }
}

class ImageListView extends React.Component {
  componentWillMount() {}

  render() {
    const {
      actionNextPage, actionPrePage, actionFirstPage, actionLastPage,
    } = this.props
    return (
      <div className="label-glrButtons">
        <ImageListButton
          img="https://png.icons8.com/material/1600/double-up.png"
          action={() => actionFirstPage()}
        />
        <ImageListButton
          img="https://png.icons8.com/material/1600/chevron-up.png"
          action={() => actionPrePage()}
        />
        <ImageListButton
          img="https://png.icons8.com/material/1600/chevron-down.png"
          action={() => actionNextPage()}
        />
        <ImageListButton
          img="https://png.icons8.com/material/2x/double-down.png"
          action={() => actionLastPage()}
        />
      </div>
    )
  }
}

const mapDispatchToProps = {
  actionNextPage: projectDuck.creators.actionNextPage,
  actionPrePage: projectDuck.creators.actionPrePage,
  actionFirstPage: projectDuck.creators.actionFirstPage,
  actionLastPage: projectDuck.creators.actionLastPage,
}

export default connect(
  null,
  mapDispatchToProps,
)(ImageListView)
